<html>
	<head>
		<title>Timeslider demo</title>
		<link rel="stylesheet" href="css/no-theme/jquery-ui-1.7.2.custom.css"></link>
		<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
		<script type="text/javascript" src="jquery-ui-1.7.2.custom.min.js"></script>
		<script type="text/javascript" src="jquery.timeslider.js"></script>
		<script type="text/javascript">
			jQuery(function($) {
					$('#slider-hidden').timeslider({step: 60});
					$('#slider-displayed').timeslider({hide: false, step: 30});
					$('#slider-minutes').timeslider({step: 1, className: 'wider'});
			});
		</script>
		<style>
			body { margin: 2em; }
			label {display: block;}
			.timeslider {width: 300px;}
			.wider {width: 100%;}
		</style>
	</head>
	<body>
		<p>
			<label for="slider-hidden">Hidden slider with one-hour increments</label>
			<input type="text" id="slider-hidden" />
		</p>
		<p>
			<label for="slider-displayed">Displayed slider with half hour increments</label>
			<input type="text" id="slider-displayed" />
		</p>
		<p>
			<label for="slider-minutes">Hidden slider with minute increments and custom css class</label>
			<input type="text" id="slider-minutes" />
		</p>
	</body>
</html>